<template>
  <div style="margin:20px;">
    <!-- 发布招聘 -->
    <el-button type="primary" @click="addRecruit(0)">发布</el-button>

    <!-- 搜索顶部 -->
    <div style="margin-top:20px;">
      <span>发布培训机构：</span>
      <el-input style="width:200px;margin-right:20px;" v-model="listQuery.inputName" size="small" placeholder="请输入培训机构名称搜索"
        @keyup.enter.native="getList" clearable></el-input>
      <span>培训技能：</span>
      <el-input style="width:200px;margin-right:20px;" v-model="listQuery.inputTel" size="small" placeholder="请选择"
        @keyup.enter.native="getList" clearable></el-input>
      <span>上课地址：</span>
      <el-input style="width:200px;margin-right:20px;" v-model="listQuery.inputAddr" size="small" placeholder="请输入地址搜索"
        @keyup.enter.native="getList" clearable></el-input>
      <el-button size="small" style="margin-left:40px;" type="success" icon="el-icon-search" @click="getList">查询</el-button>
    </div>

    <!-- 表格 -->
    <el-table ref="multipleTable" :data="tableDatas" tooltip-effect="dark" style="width:100%;margin-top:21px;" border
      v-loading="loading" :row-key="getRowKeys" @selection-change="handleSelectionChange">
      <el-table-column type="selection" :reserve-selection="true" min-width="50px" align="center"></el-table-column>
      <el-table-column align="center" min-width="80px" label="置顶">
        <template slot-scope="scope">
          <el-link @click="makeJobTop(scope.row.id)">
            <i class="el-icon-top" style="color:orange"></i>
          </el-link>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="100px" label="发布培训机构">
        <template slot-scope="scope">
          <span>{{scope.row.companyName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="100px" label="发布培训信息">
        <template slot-scope="scope">
          <span>{{scope.row.categoryTwoName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="180px" label="培训地点">
        <template slot-scope="scope">
          <span>{{scope.row.province==null?'':scope.row.province}}{{ scope.row.city==null?'':scope.row.city}}{{scope.row.addr==null?'':scope.row.addr}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="200px" label="发布时间">
        <template slot-scope="scope">
          <span>{{parseTime(scope.row.pubTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="150px">
        <template slot-scope="scope">
          <el-button @click="doPause(scope.row)" type="text" size="small">{{ scope.row.isShow ? "暂停" : "开启" }}</el-button>
          <span>|</span>
          <el-button @click="addRecruit(2, scope.row)" type="text" size="small">编辑</el-button>
          <span>|</span>
          <el-button @click="addRecruit(3, scope.row)" type="text" size="small">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.start" :limit.sync="listQuery.length"
      @pagination="getList" />

    <!-- 批量暂停 -->
    <div style="width:100%;">
      <el-button style="float:right;margin-bottom:40px;" type="primary" @click="batchPause">批量暂停</el-button>
    </div>

    <!-- 发布招聘对话框 -->
    <el-dialog @close="loadPage" :title="(state == 0) ? '发布培训信息' : ((state == 2) ? '修改培训信息' : '查看培训信息')" :visible.sync="relaseDialogVisible"
      width="60%" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" label-width="110px">
        <el-form-item label="培训机构：">
          <el-select size="small" v-model="form.fbqy" style="width: 100%;" clearable :disabled="state == 3" placeholder="请选择">
            <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训分类：">
          <el-select size="small" v-model="form.zpgw" style="width: 100%;" clearable :disabled="state == 3" placeholder="请选择">
            <el-option v-for="item in jobCategoryList1" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label>
          <el-select size="small" v-model="form.sub_zpgw" style="width: 100%;" clearable filterable allow-create
            :disabled="state == 3 || jobCategoryRequesting" placeholder="请选择">
            <el-option v-for="item in jobCategoryList2" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="培训费用：">
          <el-input :disabled="state == 3" size="small" placeholder="输入培训费用" v-model="form.tuition"></el-input>
        </el-form-item>
        <el-form-item label="培训要求：">
          <div style="width:100%;">
            <div style="display:flex;width:100%;">
              <!-- <div> -->
              <el-checkbox :disabled="state == 3" style="margin-right:5px;" label="工作地点" v-model="form.zpyq.gzdd_check"></el-checkbox>
              <!-- <el-input
                :disabled="state == 3"
                size="small"
                placeholder="多余一个地址用逗号隔开"
                v-model="form.zpyq.gzdd_addr"
              ></el-input>-->
              <div style="width:100%;display:flex;align-items:center;flex-direction:column">
                <div style="width:100%;display:flex;align-items:center" v-for="(item, index) in addressLayout" :key="index">
                  <div :style="index!=0?visibility='visibility:visible':visibility='visibility:hidden'">
                    <i class="el-icon-remove" @click="deleteAddr(item)" style="color:orange" :disabled="state == 3"></i>
                  </div>
                  <div style="margin-left:1%">
                    <v-distpicker :disabled="state == 3" hide-area :province="item.province" :city="item.city"
                      @selected="selectCity" />
                  </div>
                  <el-input :disabled="state == 3" size="small" placeholder="输入详情地址" v-model="item.addr" style="width:30%;margin-left:2%;margin-right:2%"></el-input>
                  <el-button type="primary" size="small" v-show="false" @click="addAddr" :disabled="state == 3">添加</el-button>
                </div>
              </div>
            </div>

            <div style="display:flex">
              <el-checkbox :disabled="state == 3" style="margin-right:5px;" label="培训周期" v-model="form.zpyq.cycles_check"></el-checkbox>
              <el-select :disabled="state == 3" v-model="form.zpyq.cycles" size="small" style="width:190%;" clearable
                placeholder="请选择">
                <el-option v-for="item in cyclesList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>

            <div style="display:flex">
              <el-checkbox :disabled="state == 3" style="margin-right:5px;" label="上课时间" v-model="form.zpyq.classTime_check"></el-checkbox>
              <el-select :disabled="state == 3" v-model="form.zpyq.classTime" size="small" style="width:190%;" clearable
                placeholder="请选择">
                <el-option v-for="item in classTimeList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>

            <div style="display:flex">
              <el-checkbox :disabled="state == 3" style="margin-right:5px;" label="学历要求" v-model="form.zpyq.xlyq_check"></el-checkbox>
              <el-select v-model="form.zpyq.xlyq_value" :disabled="state == 3" size="small" style="width:190%;"
                clearable placeholder="请选择">
                <el-option v-for="item in xlList" :key="item.value" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </div>
            <div style="display:flex">
              <el-checkbox :disabled="state == 3" style="margin-right:5px;" label="年龄要求" v-model="form.zpyq.nlyq_check"></el-checkbox>
              <el-input :disabled="state == 3" size="small" v-model="form.zpyq.nlyq_value"></el-input>
            </div>

            <div style="display:flex">
              <el-checkbox :disabled="state == 3" style="margin-right:5px;" label="性别要求" v-model="form.zpyq.xbyq_check"></el-checkbox>
              <el-select v-model="form.zpyq.xbyq_value" :disabled="state == 3" size="small" style="width:100%;"
                clearable placeholder="请选择">
                <el-option v-for="item in sexList" :key="item.value" :label="item.name" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="培训亮点：">
          <el-row justify="start" align="top" type="flex" style="flex-wrap:wrap;flex-direction:colum;" :gutter="20">
            <el-col style="width:auto;align-items:center;" v-for="(item) in gwldList" :key="item.id">
              <el-tag :effect="containTag(item)?'dark':'plain'" type="success" :disabled="state == 3" style="cursor: pointer;"
                @click="state==3?null:selectTag(item)">{{item.name}}</el-tag>
            </el-col>
            <el-col style="width:90px;">
              <el-tag effect="plain" type="success" :disabled="state == 3" style="cursor: pointer;" @click="state==3?isCreat=fales:isCreat=true">自定义</el-tag>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="培训详情：">
          <el-input :disabled="state == 3" type="textarea" v-model="form.gwxq" style="width:100%;"></el-input>
        </el-form-item>

        <el-form-item v-show="state != 3">
          <el-button type="primary" @click="onSubmit">提交发布</el-button>
          <el-button @click="relaseDialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 暂停对话框 -->
    <el-dialog title="提示" append-to-body :visible.sync="dialogDeleteItemVisible" width="30%">
      <span>是否撤下该培训信息？</span>
      <span slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button @click="deleteFunctionItem" type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 自定义岗位亮点 -->
    <el-dialog title="自定义培训亮点" append-to-body :visible.sync="isCreat" width="30%" center>
      <el-input placeholder="请输入内容" v-model="inputTag" clearable @keyup.enter.native="creatJobTag"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isCreat=false">取 消</el-button>
        <el-button @click="creatJobTag" type="primary">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Pagination from "@/components/Pagination";
  import {
    getJobCompanyList,
    getJobCategory,
    getCompanyList,
    addJobOffers,
    modifyJobOffers,
    showJobOffers,
    getJobStrengthList,
    addJobStrength,
    getJobInfo,
    makeJobTop
  } from "@/api/educationReq.js";
  import {
    get
  } from "http";
  import {
    parseTime
  } from "@/utils/index";
  import {
    format
  } from "path";
  export default {
    inject:["reload"],
    components: {
      Pagination
    },
    data() {
      return {
        //岗位亮点控制
        isCreat: false,
        //自定义岗位
        inputTag: "",
        //岗位亮点点击效果选择
        myEffect: [],
        // 岗位亮点
        gwldList: [],
        //地址布局
        addressLayout: [{
          //省
          province: "",
          //市
          city: "",
          provinceCode: "",
          cityCode: "",
          addr: "",
          key: 0
        }],
        //占位符
        visibility: "visibility:visible",
        //工作地点
        gzddList: [],
        addrIndex: 0,
        loading: false,
        // 发布对话框
        relaseDialogVisible: false,
        // 暂停对话框
        dialogDeleteItemVisible: false,
        // select勾选数据
        seleted: [],
        // 数据集合
        tableDatas: [],
        // 数据集合单项数据
        tableDatasItem: {},
        form: {
          // 发布企业
          fbqy: "",
          // 招聘岗位一级
          zpgw: "",
          // 招聘岗位二级
          sub_zpgw: "",
          // 招聘要求
          zpyq: {
            // 工作地点
            gzdd_check: false,
            gzdd_addr: "",
            // 培训周期
            cycles_check: false,
            cycles: '',
            // 上课时间
            classTime_check:false,
            classTime:'',

            // 学历要求
            xlyq_check: false,
            xlyq_value: "",
            // 年龄要求
            nlyq_check: false,
            nlyq_value: "",
            // 性别要求
            xbyq_check: false,
            xbyq_value: ""
          },
          // 岗位亮点
          strengthsId: [],
          // 岗位详情
          gwxq: ""
        },
        cyclesList: ["不限", "一个月内", "1-2个月", "3-6个月", "6-12个月", "一年以上"],
        classTimeList:["不限","白天班","周末班","夜班","寒暑假班","自由安排"],

        // 学历
        xlList: [{
            value: "不限",
            name: "不限"
          },
          {
            value: "小学",
            name: "小学"
          },
          {
            value: "高中",
            name: "高中"
          },
          {
            value: "技校",
            name: "技校"
          },
          {
            value: "中专",
            name: "中专"
          },
          {
            value: "大专",
            name: "大专"
          },
          {
            value: "本科",
            name: "本科"
          }
        ],
        // 性别
        sexList: [{
            value: "MAN",
            name: "男"
          },
          {
            value: "WOMAN",
            name: "女"
          },
          {
            value: "UNLIMITED",
            name: "不限"
          }
        ],
        // 企业列表
        companyList: [],
        // 岗位列表1-2
        jobCategoryList1: [],
        jobCategoryList2: [],
        jobCategoryRequesting: false,
        // 分页
        total: 0,
        listQuery: {
          start: 1,
          length: 10,
          inputName: "",
          inputTel: "",
          inputAddr: ""
        },
        // 当前状态 发布招聘(0)\暂停(1)\编辑(2)\查看(3)
        state: 0
      };
    },
    created() {
      this.getCompanyList();
      this.getJobCategory();
      this.getList();
      this.getJobStrengthList();
    },
    watch: {
      "form.zpgw": function(then, old) {
        if (then != "") {
          var params = {
            pid: then
          };
          this.jobCategoryRequesting = true;
          getJobCategory(params).then(res => {
            this.form.sub_zpgw = res.data[0].id;
            this.jobCategoryList2 = res.data;
            this.jobCategoryRequesting = false;
          });
        }
      }
    },
    methods: {
      loadPage(){
        this.reload()
      },
      parseTime,
      // 发布招聘(0)\暂停(1)\编辑(2)\查看(3)
      addRecruit(st, data) {
        this.state = st;
        this.tableDatasItem = data;
        switch (st) {
          case 0: // 添加
            this.myEffect = [];
            //地址布局
            this.addressLayout = [{
              province: "",
              city: "",
              provinceCode: "",
              cityCode: "",
              addr: "",
              key: 0
            }];
            this.getJobStrengthList();
            this.form.zpyq = {


              // 工作地点
              gzdd_check: false,
              gzdd_province: "",
              gzdd_provinceCode: "",
              gzdd_city: "",
              gzdd_cityCode: "",
              gzdd_addr: "",
             // 培训周期
             cycles_check: false,
             cycles: '',
             // 上课时间
             classTime_check:false,
             classTime:'',
             // 学历要求
             xlyq_check: false,
             xlyq_value: "",
             // 年龄要求
             nlyq_check: false,
             nlyq_value: "",
             // 性别要求
             xbyq_check: false,
             xbyq_value: ""
            };
            this.form.fbqy = "";
            this.form.zpgw = "";
            this.form.sub_zpgw = "";
            this.form.strengthIds = [];
            this.form.gwxq = "";
            this.relaseDialogVisible = true;
            break;
          case 1: // 暂停
            break;
          case 2: // 编辑
          case 3: // 查看
            console.log("--------------------------------------");
            this.getJobInfo(data);
            //地址布局
            this.addressLayout = [{
              province: data.province,
              city: data.city,
              provinceCode: data.provinceCode,
              cityCode: data.cityCode,
              addr: data.addr,
              key: 0
            }];
            this.form.zpyq = {
              // 工作地点
              gzdd_check: data.addr != "",
              gzdd_province: data.province,
              gzdd_provinceCode: data.provinceCode,
              gzdd_city: data.city,
              gzdd_cityCode: data.cityCode,
              gzdd_addr: data.addr,
              // 培训周期
              cycles_check: data.cycles != "",
              cycles: data.cycles,
              // 上课时间
              classTime_check:data.classTime != "",
              classTime:data.classTime,
              // 学历要求
              xlyq_check: data.education != "",
              xlyq_value: data.education,
              // 年龄要求
              nlyq_check: data.age != "",
              nlyq_value: data.age,
              // 性别要求
              xbyq_check: data.sex != "",
              xbyq_value: data.sex
            };
            this.form.tuition=data.tuition
            this.form.fbqy = data.companyId;
            this.form.zpgw = data.categoryOneId;
            this.form.sub_zpgw =
              data.categoryTwoId == "" ? data.name : data.categoryTwoId;
            this.form.strengthsId =
              null == data.strengthIds ? [] : data.strengthIds;
            this.form.gwxq = data.details;
            this.relaseDialogVisible = true;
            break;
          default:
            break;
        }
      },
      // 过滤id
      filterId(datas, id) {
        if (id == "") {
          return "";
        } else {
          var contained = false;
          datas.forEach(item => {
            if (item.id == id) contained = true;
          });
          if (contained) {
            return id;
          } else {
            return "";
          }
        }
      },
      // 根据id过滤出数据
      filterName(datas, id) {
        if (id == "") {
          return "";
        } else {
          var value = "";
          var contained = false;
          datas.forEach(item => {
            if (item.id == id) {
              contained = true;
              value = item.name;
            }
          });
          if (contained) {
            return value;
          } else {
            return id;
          }
        }
      },
      // 提交
      onSubmit() {
        console.log(this.addressLayout);

        var data = {
          province: this.addressLayout[0].province ?
            this.addressLayout[0].province : "",
          provinceCode: this.addressLayout[0].provinceCode ?
            this.addressLayout[0].provinceCode : "",
          city: this.addressLayout[0].city ? this.addressLayout[0].city : "",
          cityCode: this.addressLayout[0].cityCode ?
            this.addressLayout[0].cityCode : "",
          addr: this.addressLayout[0].addr ? this.addressLayout[0].addr : "",
          categoryOneId: this.filterId(this.jobCategoryList1, this.form.zpgw),
          categoryOneName: this.filterName(this.jobCategoryList1, this.form.zpgw),
          categoryTwoId: this.filterId(this.jobCategoryList2, this.form.sub_zpgw),
          categoryTwoName: this.filterName(
            this.jobCategoryList2,
            this.form.sub_zpgw
          ),
          companyId: this.form.fbqy,
          companyName: this.filterName(this.companyList, this.form.fbqy),
          details: this.form.gwxq,
          tuition: this.form.tuition,
          age: this.form.zpyq.nlyq_check ? this.form.zpyq.nlyq_value : "",
          education: this.form.zpyq.xlyq_check ? this.form.zpyq.xlyq_value : "",

          cycles: this.form.zpyq.cycles_check ? this.form.zpyq.cycles : "",
          classTime: this.form.zpyq.classTime_check ? this.form.zpyq.classTime : "",
          name: this.filterName(this.jobCategoryList2, this.form.sub_zpgw),

          sex: this.form.zpyq.xbyq_check ?
            this.form.zpyq.xbyq_value == "" ?
            "" :
            this.form.zpyq.xbyq_value : "",
          strengthsId: this.myEffect
        };
        if (this.state == 0) {
          addJobOffers(data).then(res => {
            this.getList();
          });
        } else if (this.state == 2) {
          data.id = this.tableDatasItem.id;
          modifyJobOffers(data).then(res => {
            this.getList();
          });
        }

        this.relaseDialogVisible = false;
      },
      // 查询企业列表
      getCompanyList() {
        getCompanyList().then(res => {
          this.companyList = res.data;
        });
      },
      // 查询岗位一级分类
      getJobCategory() {
        getJobCategory().then(res => {
          this.jobCategoryList1 = res.data;
          // this.form.zpgw = res.data[0].id;
        });
      },
      // 查询分页数据
      getList() {
        this.loading = true;
        var params = {
          pageNum: this.listQuery.start - 1,
          pageSize: this.listQuery.length,
          companyName: this.listQuery.inputName,
          name: this.listQuery.inputTel,
          addr: this.listQuery.inputAddr
        };
        getJobCompanyList(params).then(res => {
          this.total = res.data.totalElements;
          this.tableDatas = res.data.content;
          this.loading = false;
        });
      },
      // 置顶
      makeJobTop(id) {
        console.log("-----------------");
        console.log(id);
        var formData = {
          id: id,
          top: true
        };
        // const formData = new FormData();
        // formData.append("id", id);
        // formData.append("top", true);

        makeJobTop(formData).then(res => {
          this.getList();
        });
      },
      // --------------------------------
      // 查看招聘详情
      getJobInfo(data) {
        var params = {
          id: data.id
        };
        getJobInfo(params).then(res => {
          this.myEffect =
            res.data.strengthsId == null ? [] : res.data.strengthsId;
          console.log(this.myEffect);
        });
      },
      // 获取岗位亮点列表
      getJobStrengthList() {
        getJobStrengthList().then(res => {
          this.gwldList = res.data.content;
        });
      },
      //自定义岗位亮点
      creatJobTag() {
        this.isCreat = false;
        if (null != this.inputTag) {
          var param = {
            name: this.inputTag
          };
          // const formData = new FormData();
          // formData.append("name", this.inputTag);
          addJobStrength(param).then(res => {
            this.inputTag = "";
            this.gwldList.push(
              Object.assign({
                id: res.data.id,
                name: res.data.name
              })
            );
            console.log(res);
          });
        }
      },
      containTag(item) {
        return this.myEffect.indexOf(item.id) != -1;
      },
      //岗位亮点点击事件
      selectTag(item) {
        var index = this.myEffect.indexOf(item.id);
        if (index != -1) {
          this.myEffect.splice(index, 1);
        } else {
          this.myEffect.push(item.id);
        }
      },
      //选择省市
      selectCity: function(data) {
        this.addressLayout.forEach((item, index) => {
          if (item.key == this.addrIndex) {
            item.provinceCode = data.province.code + "000000";
            item.cityCode = data.city.code + "000000";
            item.province = data.province.value;
            item.city = data.city.value;
          }
        });
      },
      //添加工作地点
      addAddr() {
        let length = this.addressLayout.length;
        this.addressLayout.push({
          //省
          province: "",
          //市
          city: "",
          provinceCode: "",
          cityCode: "",
          addr: "",
          key: length
        });
      },
      getIndex(index) {
        this.addrIndex = index;
      },
      //删除工作地点
      deleteAddr(item) {
        var index = this.addressLayout.indexOf(item);
        if (index !== -1) {
          this.addressLayout.splice(index, 1);
        }
      },

      // ---------------------
      getRowKeys(row) {
        return row.id;
      },
      // 单个暂停/展示
      doPause(data) {
        var datas = [];
        datas.push(data.id);

        var formData = {
          ids: datas
        };

        showJobOffers(formData, !data.isShow).then(res => {
          this.getList();
        });
      },
      // 批量暂停
      batchPause() {
        if (this.seleted.length == 0) return;

        var formData = {
          ids: this.seleted
        };

        showJobOffers(formData, false).then(res => {
          this.seleted = [];
          this.toggleSelection();
          this.getList();
        });
      },
      // 撤下招聘
      deleteFunctionItem() {},
      // 取消勾选
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      // 勾选状态统计
      handleSelectionChange(val) {
        this.seleted = [];
        val.forEach(item => {
          this.seleted.push(item.id);
        });
      }
    }
  };
</script>

<style>
  .test {
    color: rgb(224, 126, 14);
  }
</style>
